<template>
  <div
    class="knowledge-topic"
    ref="scrollableDivRef"
    @scroll="handleScroll"
    v-loading="isLoading"
  >
    <template v-if="topicList.length">
      <topic
        v-for="(question, index) in topicList"
        :topicData="question"
        :key="index"
        :showTopicParser="question.showTopicParser"
      >
        <template #topic-head>
          <div class="topic-head">
            <div class="label-arr">
              <div class="label">
                {{ questionTypeMap[question.type] }}
              </div>
              <div class="divide"></div>
              <div class="label">
                {{ difficultyMap[question.difficulty] }}
              </div>
              <div class="divide"></div>
              <div class="label">ID：{{ question.id }}</div>
            </div>
          </div>
        </template>
        <template #topic-foot>
          <div class="topic-foot">
            <div class="knowledge" v-if="question?.keypoint?.length">
              知识点：<span
                class="knowledge-name"
                v-for="(kp, index) in question.keypoint"
                :key="index"
                >{{ kp.name }}</span
              >
            </div>
            <div class="more">
              <div
                class="basket-btn"
                :class="{ 'remove-btn': isInBasket(question) }"
                @click="
                  isInBasket(question)
                    ? onRemoveBasket(question)
                    : onAddBasket(question)
                "
              >
                {{ isInBasket(question) ? '移出' : '加入' }}选题篮
              </div>
              <div class="action-btn" @click="handleCheckParse(index)">
                <label class="icon"></label>
                <span
                  >{{ question.showTopicParser ? '收起' : '查看' }}解析</span
                >
              </div>
            </div>
          </div>
        </template>
      </topic>
    </template>
    <el-empty v-else />
  </div>
</template>

<script setup>
import { ref, watch, onBeforeMount } from 'vue'

import { questionTypeMap } from '@/constants'
import topic from '@/components/rb-topic/Topic.vue'
import { difficultyMap } from '../data'
import { useTaskStore } from '@/stores'
const scrollableDivRef = ref()
const emits = defineEmits(['knowledgeNextPage', 'get-knowledge-topic'])

const taskStore = useTaskStore()
// 加载首次数据
onBeforeMount(() => {
  if (!props.topicData.length) {
    emits('get-knowledge-topic')
  }
})

function handleScroll() {
  console.log(111)

  if (
    scrollableDivRef.value.scrollTop + scrollableDivRef.value.clientHeight ===
    scrollableDivRef.value.scrollHeight
  ) {
    emits('knowledgeNextPage')
  }
}

const props = defineProps({
  topicData: { type: Array, default: () => [] },
  isLoading: {
    type: Boolean,
    default: false
  }
})

const topicList = ref([])

const onAddBasket = item => {
  console.log('basket========', item.category)
  taskStore.setTaskList({
    topic_id: item.id,
    source: item.source,
    topic_type: item.type,
    subject_id: item.subject,
    is_similar: 0,
    relation_id: 0,
    question_detail: item
  })
}

const onRemoveBasket = item => {
  console.log('remove basket', item)
  taskStore.deleteTopicById([item.id])
}

const isInBasket = question => {
  return taskStore.taskList.find(item => item.topic_id === question?.id)
}

watch(
  () => props.topicData,
  newValue => {
    console.log(newValue, 'topicData')
    console.log(newValue.length, 'topicData')

    // if (newValue.length == 0) {
    //   return
    // }
    let newTopicArr = JSON.parse(JSON.stringify(newValue))
    newTopicArr.forEach(element => {
      if (element.showTopicParser == undefined) {
        element.showTopicParser = false
      }
    })
    console.log(newTopicArr, 'newTopicArr')

    topicList.value = newTopicArr
    console.log(topicList.value, 'topicList.value')
  },
  {
    deep: true,
    immediate: true
  }
)

function handleCheckParse(index) {
  topicList.value[index].showTopicParser =
    !topicList.value[index].showTopicParser
}
</script>

<style lang="less" scoped>
.knowledge-topic {
  height: 100%;
  overflow-y: auto;

  --topic-x-padding: 20px;
  --topic-y-padding: 12px;
  --render-radius: 8px;
  :deep(.topic-cpn) {
    padding: var(--topic-y-padding) 0;
    border: 1px solid #c4c4c4;
    border-radius: var(--render-radius);
    margin-bottom: 14px;

    .rb-question {
      padding: 0 var(--topic-x-padding);
      margin: 0 auto;
    }

    :deep(.expand-analysis-item) {
      width: 94%;
      margin: 0 auto;
    }
  }

  .topic-head {
    display: flex;
    align-items: center;
    margin-bottom: var(--topic-y-padding);
    border-bottom: 1px solid rgba(196, 196, 196, 0.3);
    color: #999;
    font-size: 16px;
    padding-bottom: var(--topic-y-padding);
    padding-left: var(--topic-x-padding);

    .label-arr {
      display: flex;
      align-items: center;

      .label {
        font-size: 16px;
        color: #040b1a;
        opacity: 0.5;
      }

      .divide {
        height: 16px;
        margin: 0 16px;
        width: 1px;
        background-color: #040b1a;
        opacity: 0.5;
      }
    }
  }

  .topic-foot {
    .knowledge {
      padding: var(--topic-y-padding) var(--topic-x-padding);
      color: #040b1a;
      font-size: 16px;
      border-bottom: 1px solid rgba(196, 196, 196, 0.3);

      .knowledge-name {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        height: 27px;
        padding: 0 6px;
        border: 1px solid #e1e1e1;
        border-radius: 3px;
        background-color: #fbfbfb;
        color: #616161;
        font-size: 14px;
        line-height: 27px;
        cursor: pointer;
        margin-right: 8px;
      }
    }

    .more {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      padding: var(--topic-y-padding) var(--topic-x-padding) 0
        var(--topic-x-padding);
      gap: 30px;

      .action-btn {
        cursor: pointer;
        color: gray;
        font-size: 14px;
        line-height: 14px;
        display: inline-flex;
        align-items: center;

        .icon {
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 14px;
          margin-right: 4px;
          background: url(@/assets/images/assignment/analysis-icon.png)
            no-repeat center/cover;
        }
      }

      .basket-btn {
        padding: 2px 16px;
        font-size: 14px;
        cursor: pointer;
        background: #bfd9ff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #bfd9ff;
        color: #448efb;

        &.remove-btn {
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #448efb;
          color: #448efb;
          background: #fff;
        }
        &:hover {
          opacity: 0.95;
        }
      }
    }
  }
}
</style>
